window.onload = function(){
	let pages = document.querySelectorAll(".page"),
	flag = 0,
	pageFlag = 0;
	let allAnswers = document.querySelectorAll(".answerItem"),
		answers = pages[pageFlag].querySelectorAll(".answerItem"),
		cloud = document.querySelectorAll(".cloudMove");
	let testResult = document.querySelector(".result");
	let isClick = true;
	let bgMusic = document.getElementById('bgmusic');
	console.log(bgMusic);
	//禁止浏览器默认事件
	document.documentElement.addEventListener('touchmove', function (event) {
	    if (event.touches.length > 1) {
	        event.preventDefault();
	    }
	}, false);
	//获取json数据
	function getData(_type,_url,callback,_data){
		let xhr = new XMLHttpRequest();
		//console.log(_data);
		let str="";
		for(let i in _data){
			str += i+"="+_data[i]+"&";
		}
		str = str.slice(0,-1);
		//console.log(str);
		if(_type=="get"||_type=="GET"){
			xhr.open(_type,_url+"?"+ str);
			xhr.send();
		}else if(_type=="post"||_type=="POST"){
			xhr.open(_type,_url);
			xhr.send(str);
		}
		xhr.addEventListener("readystatechange",function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				var result = JSON.parse(xhr.responseText);
				callback(result);
			}
		})
	}
	//更新页面动画
	function updateAction(){
		//移除云的动画
		for(let i=0; i<cloud.length; i++){
			cloud[i].classList.remove("animated-cloud");
			//console.log(i);
		}
		//移除答案动画
		for(let i=0; i<allAnswers.length; i++){
			allAnswers[i].classList.remove("bounceInUp");
		}
	}
	//根据json数据生成问答题目页面
	function nextQuestion(num,data,page){
		let question = pages[page].querySelector(".question p");
		question.innerText = (num+1) +"."+ data.question;
		let questionImg = pages[page].querySelector(".questionImg");
		questionImg.children[0].src = data.img;
		cloud[page].classList.add("animated-cloud");
		//去除正确选项的勾和背景和错误叉
		for(let i=0; i<allAnswers.length; i++){
			allAnswers[i].children[1].style.display = "none";
			allAnswers[i].children[2].style.display = "none";
			allAnswers[i].style.background = "url(./img/answerbg_03.png) no-repeat";
			allAnswers[i].style.backgroundSize = "contain";
		}
		//渲染答案内容
		for(let i=0; i<answers.length; i++){
			answers[i].classList.add("bounceInUp");
			answers[i].children[0].innerText = data["answers"][i];
		}
		//渲染小狗图片
		let kugouDogNum = Math.floor(Math.random()*12)+1;
		let kugouDog = pages[page].querySelector(".kugouDog img");
		kugouDog.src = "img/kugou"+kugouDogNum+".png";
		isClick = true;
	}
	
	//切换页面
	function nextPage(){
		let screenHeight = document.body.clientHeight;
		if(pages[0].classList.contains("fadeInUp")){
			pages[0].classList.remove("fadeInUp");
			pages[1].classList.remove("fadeOutUp");
			pages[0].style.transform = "translateY(0)";
			pages[1].style.transform = "translateY(-100%)";
			pages[0].classList.add("fadeOutUp");
			pages[1].classList.add("fadeInUp");
			pageFlag = 1;
			answers = pages[pageFlag].querySelectorAll(".answerItem");
		}else{
			pages[1].classList.remove("fadeInUp");
			pages[0].classList.remove("fadeOutUp");
			pages[1].style.transform = "translateY(0)";
			pages[0].style.transform = "translateY(-100%)";
			pages[1].classList.add("fadeOutUp");
			pages[0].classList.add("fadeInUp");
			pageFlag = 0;
			answers = pages[pageFlag].querySelectorAll(".answerItem");
		}
	}
	//检查答案
	function checkAnswer(ele,curdata){
		//console.log(ele.dataset.answernum);
		//console.log(curdata.rightAnswer);
		for(let i=0; i<allAnswers.length; i++){
			//显示正确答案
			if(allAnswers[i].dataset.answernum == curdata.rightAnswer){
				allAnswers[i].style.background = "url(./img/rightbg.png) no-repeat";
				allAnswers[i].style.backgroundSize = "contain";
				allAnswers[i].children[1].style.display = "block";
			}
			if(ele.dataset.answernum != curdata.rightAnswer){
				ele.children[2].style.display = "block";
			}
		}
		/*if(ele.dataset.answernum == curdata.rightAnswer){
			ele.children[1].style.display = "block";
			ele.style.background = "url(./img/rightbg.png) no-repeat contain";
		}else{
			console.log("哈哈");
		}*/
	}
	
	//点击答案
	function clickAnswer(){
		for(let i=0; i<allAnswers.length; i++){
			allAnswers[i].addEventListener("click",function(){
				let nextQuestionCont;
				var that = this;
				if(isClick){
					flag++;
					getData("get","js/data.json",function(data){
						isClick = false;
						nextQuestionCont = data[flag];
						checkAnswer(that,data[flag-1]);
						if(flag < 22){
							setTimeout(function(){
								updateAction();
								nextPage();
								nextQuestion(flag,nextQuestionCont,pageFlag);
							},500)
						}else{
							setTimeout(function(){
								testResult.style.display = "block";
							},500)
						}
					})
				}
			})
		}
	}
	clickAnswer();
	//点击分享按钮弹出遮罩
	function shareGuide(){
		let shareBtn = testResult.querySelector(".share-btn"),
			shareGuildPage = document.querySelector(".share-page");
		shareBtn.addEventListener("touchend",function(){
			shareGuildPage.style.display = "block";
		})
		shareGuildPage.addEventListener("touchend",function(){
			if(shareGuildPage.style.display == "block"){
				shareGuildPage.style.display = "none";
			}
		})
	}
	shareGuide();
	//点击开始按钮隐藏开始页和播放音乐
	function clickStart(){
		let startBtn = document.querySelector(".start-button"),
			indexPage = document.querySelector(".index");
		startBtn.addEventListener("click",function(){
			indexPage.classList.add("zoomOut");
			setTimeout(function(){
				indexPage.style.display = "none";
			},1000)
			bgMusic.play();
		})
	}
	clickStart();
	//控制音乐
	function musicControl(){
		let musicBtn = document.querySelectorAll(".musicLogo");
		console.log(bgMusic.paused);
		for(let i=0; i<musicBtn.length; i++){
			musicBtn[i].addEventListener("click",function(){
				if(bgMusic.paused){
					bgMusic.play();
					musicBtn[0].classList.add("musicRotate");
					musicBtn[1].classList.add("musicRotate");
					musicBtn[2].classList.add("musicRotate");
				}else{
					bgMusic.pause();
					musicBtn[0].classList.remove("musicRotate");
					musicBtn[1].classList.remove("musicRotate");
					musicBtn[2].classList.remove("musicRotate");
				}
			})
		}
	}
	musicControl();
	//预加载
	function reload(){
		//实例化一个预加载资源的对象
		var queue = new createjs.LoadQueue();
		var angle = 0;
		var leftContent = document.querySelector(".left-content");
		var rightContent = document.querySelector(".right-content");
		var textCircle = document.querySelector(".text-circle");
		let reloadPage = document.querySelector(".reload");
		let imgUrl = [];
		//ajax请求获取图片地址
		getData("get","js/data.json",function(data){
			for(var i=0; i<data.length; i++){
				imgUrl[i] = {};
				imgUrl[i]["id"] = i;
				imgUrl[i]["src"] = "./" + data[i].img;
			}
			imgUrl.push({"id":i,"src":"./img/rightbg.png"});
			imgUrl.push({"id":i+1,"src":"./media/Sugar.mp3"});
			console.log(imgUrl);
			//设置加载的资源
			queue.loadManifest(imgUrl);
			queue.on("progress", function(res) {
				//console.log("progress", res);
				angle = 360 * res.progress;
				if(angle > 180) {
					leftContent.setAttribute('style', 'transform: rotate(' + (angle - 180) + 'deg)');
					rightContent.setAttribute('style', 'transform: rotate( 180deg )');
				} else {
					rightContent.setAttribute('style', 'transform: rotate(' + angle + 'deg)');
				}
				//loading.innerText = Math.floor(res.progress * 100) + "%";
				textCircle.innerText = parseInt(res.progress * 100) + '%';
			})
			queue.on("complete", function(res) {
				//console.log("complete", res);
				reloadPage.style.display = "none";
			})
		})
	}
	reload();
}



